import React, { Component } from 'react'
import { Form,Input,Button} from 'antd'
import styles from './login.less'

class login extends Component {
    constructor(props){
        super(props);
    }

    handleSubmit=e=>{
        e.preventDefault();
        this.props.form.validateFields((err,values)=>{
            if(!err){
                const {email,password}=values;
                //console.log(email,password);
                if(email=='754996539@qq.com'&&password=='123'){
                    alert('登录成功');
                    window.location.href='/#/home'
                }
                else{
                    alert('账号或密码失败，请重新登录');
                }
            }
        });
    } 

    render() {
        const {getFieldDecorator}=this.props.form;
        //实现数据双向绑定
        const required=true;
        return (
            <div className={styles.loginBox}>
                <div className={styles.image}>
                    <img src={require('../../assets/icon.png')} ></img>
                </div>
                <div>
                    <Form className={styles.loginform} onSubmit={this.handleSubmit}>
                        <Form.Item label="邮箱">
                            {getFieldDecorator('email',{
                                rules:[{
                                    required,
                                    message:'请输入邮箱'
                                },{
                                    type:"email",
                                    message:"请输入正确的邮箱格式，如754996539@qq.com"
                                }]
                            })(
                                <Input></Input>
                            )}
                        </Form.Item>
                        <Form.Item label="密码">
                            {getFieldDecorator('password',{
                                    rules:[{
                                        required,
                                        message:'请输入密码'
                                    }]
                                })(
                                    <Input type='password'></Input>
                                )}
                        </Form.Item>
                        <Form.Item>
                            <Button type='primary' style={{width:'100%'}}  htmlType="submit">
                                登录
                            </Button>
                        </Form.Item>
                    </Form>
                </div>
            </div>
        )
    }
}

export default Form.create()(login)